<template>
	<view class="container">
		<Prompt ref="myprompt"></Prompt>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="header">
			<view class="header-grade shadow" v-if="this.$store.state.user.name">
				<uni-data-select
					class="body-search-left-select"
					v-model="gradeId"
					:localdata="gradelist"
					@change="change"
				></uni-data-select>
			</view>
		</view>
		<view class="body">
			<view class="">
				
			</view>
			<view class="body-search">
				<view class="body-search-left">
					<uni-data-select
						class="body-search-left-select"
						v-model="subjectId"
						:localdata="subjectlist"
						@change="change2"
					></uni-data-select>
				</view>
				<view class="body-search-right">
					<view class="body-search-right-button" @click="reset()">
					</view>
				</view>
			</view>
			<view class="body-list">
				<view class="body-list-piece" v-for="item in list" :key="item.id" @click="details(item.id)">
					<view class="body-list-piece-header">
						<view class="body-list-piece-header-icon"></view>
						<view class="body-list-piece-header-text">{{item.period}}—{{item.studioName}}</view>
						<view class="body-list-piece-header-time">{{item.time}}</view>
					</view>
					<view class="body-list-piece-student">
						<view class="body-list-piece-student-icon"></view>
						<view class="body-list-piece-student-text">{{item.studentName}}:{{item.question}}</view>
					</view>
					<view class="body-list-piece-teacher">
						<view class="body-list-piece-teacher-icon"></view>
						<view class="body-list-piece-teacher-text">{{item.teacherName}}:{{item.wordAnswer}}</view>
						<view class="body-list-piece-teacher-details"></view>
					</view>
				</view>
			</view>
		</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getQuestionsRmquestion } from "@/api/hot/index";
	import { getUnreadInformation } from "@/api/index";
	import { getinfo, setinfo, removeinfo } from '@/utils/auth5'
	import { getperiod, setperiod, removeperiod } from '@/utils/auth7'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				subjectlist: [],
				list: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				gradelist: [],
				subjectId: '',
				gradeId: getinfo().gradeId,
				periodId: getinfo().periodId,
			}
		},
		created() {
		    this.Initialize()
		},
		methods: {
			Initialize(){				
				let period = getperiod()
				for(let i in period){
					if(period[i].value==this.periodId){
						this.gradelist = getperiod()[i].baseGrade
						this.subjectlist = getperiod()[i].baseSubject
					}
				}
				if(this.subjectlist.length == 0){
					let arr = []
					for(let i in period){
						arr = arr.concat(period[i].baseSubject);
					}
					this.subjectlist = this.noRepeat(arr)
				}
				if(this.$store.state.user.name){
					this.unreadInformation()
				}
				this.change(getinfo().gradeId)
			},
			noRepeat(arr) {
				let list = []
				for(var i in arr){
					let f = true
					for(let j in list){
						if(arr[i].value == list[j].value){
							f = false
						}
					}
					if(f){
						list.push(arr[i])
					}
				}
				return list
			},
			unreadInformation(){
				getUnreadInformation().then(res => {
					// console.log("res",res)
					let num = res.tobeGetQuestions
					if(num>0){
						if(num>99){
							num='99+'
						}else{
							num+=''
						}
					}
					uni.setTabBarBadge({ //显示数字
					  index: 1,//tabbar下标
					  text: num//数字
					})
					let num2 = res.unreadCounselingNum+res.unreadQuestionsNum
					if(num2>0){
						if(num2>99){
							num2='99+'
						}else{
							num2+=''
						}
					}
					uni.setTabBarBadge({ //显示数字
					  index: 2,//tabbar下标
					  text: num2//数字
					})
				});
			},
			change(e){
				this.gradeId = e
				this.mescroll.scrollTo(0, 0)
				this.mescroll.triggerDownScroll()
			},
			change2(e){
				this.subjectId = e
				this.mescroll.scrollTo(0, 0)
				this.mescroll.triggerDownScroll()
			},
			reset(){
				this.subjectId=null
				this.mescroll.scrollTo(0, 0)
				this.mescroll.triggerDownScroll()
			},
			upCallback(page) {
				let data='?pageNum='+page.num
				+'&pageSize='+page.size
				if(this.periodId){
					data+='&periodId='+this.periodId
				}
				if(this.gradeId){
					data+='&gradeId='+this.gradeId
				}
				if(this.subjectId){
					data+='&subjectId='+this.subjectId
				}
				getQuestionsRmquestion(data).then(res => {		
					if(page.num==1){
						this.list=[]
					}
					let list2= []
					this.total = res.total
					let data=res.rows
					for(let i in data){
						list2.push({
							id: data[i].id,
							studioName: data[i].studioName,
							time: this.timeago(data[i].questionTime),
							studentName: data[i].studentName,
							question: data[i].question,
							teacherName: data[i].teacherName,
							wordAnswer: data[i].wordAnswer,
							period: this.dealperiod(data[i].periodId)
						})
					}
					this.mescroll.endSuccess(list2.length,res.total);
					this.list=this.list.concat(list2);
				});		
						
			},
			// questionsRmquestion(data){
			// 	getQuestionsRmquestion(data).then(res => {
			// 		if(this.pageNum==1){
			// 			this.list=[]
			// 		}
			// 		// console.log("res", res)
			// 		this.total = res.total
			// 		let data=res.rows
			// 		for(let i in data){
			// 			let time = this.timeago(data[i].questionTime)
			// 			this.list.push({
			// 				id: data[i].id,
			// 				studioName: data[i].studioName,
			// 				time: time,
			// 				studentName: data[i].studentName,
			// 				question: data[i].question,
			// 				teacherName: data[i].teacherName,
			// 				wordAnswer: data[i].wordAnswer,
			// 			})
			// 		}
			// 	});
			// },
			dealperiod(id){
				let plist = getperiod()
				let period = ''
				for(let i in plist){
					if(plist[i].value==id){
						period = plist[i].text
					}
				}
				return period
			},
			timeago(dateTimeStamp){
				let dateTimeStamplist = dateTimeStamp.split('-')
				dateTimeStamp = dateTimeStamplist[0]+'/'+dateTimeStamplist[1]+'/'+dateTimeStamplist[2]
				dateTimeStamp = new Date(dateTimeStamp).getTime()
				
				var minute = 1000 * 60;      //把分，时，天，周，半个月，一个月用毫秒表示
				var hour = minute * 60;
				var day = hour * 24;
				var week = day * 7;
				var halfamonth = day * 15;
				var month = day * 30;
				var now = new Date().getTime();   //获取当前时间毫秒
				var diffValue = now - dateTimeStamp;//时间差
			
				if(diffValue < 0){
					return;
				}
				var minC = diffValue/minute;  //计算时间差的分，时，天，周，月
				var hourC = diffValue/hour;
				var dayC = diffValue/day;
				var weekC = diffValue/week;
				var monthC = diffValue/month;
				var result
				if(monthC >= 1){
					result = " " + parseInt(monthC) + "月前"
				}else if(weekC >= 1 && weekC < 4){
					result = " " + parseInt(weekC) + "周前"
				}else if(dayC >= 1 && dayC < 7){
					result = " " + parseInt(dayC) + "天前"
				}else if(hourC >= 1 && hourC < 24){
					result = " " + parseInt(hourC) + "小时前"
				}else if(minC >= 1 && minC < 60){
					result =" " + parseInt(minC) + "分钟前"
				}else if(diffValue >= 0 && diffValue <= minute){
					result = "刚刚"
				}else {
					var datetime = new Date();
					datetime.setTime(dateTimeStamp);
					var Nyear = datetime.getFullYear();
					var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
					var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
					var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
					var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
					var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
					result = Nyear + "-" + Nmonth + "-" + Ndate
				}
				return result;
			},
			details(id){
				this.$store.state.user.questionid = id
				this.$store.state.user.urlquestion = '/pages/hot/index'
				this.$store.state.user.refresh=!this.$store.state.user.refresh
				this.$router.push('/pages/hot/questions')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		font-size: 4vw;
		background-color: #F6F7F8;
		/* background-color: #000000; */
		width: 100vw;
		height: calc(100vh - 50px);
		display: grid;
		justify-items: center;
		align-items: start;
		grid-template-rows: auto auto;
		overflow: auto;
	}
	.header{
		width: 100vw;
		height: 68.25vw;
		background: url(../../static/hot/hottop.svg);
		background-size: 100% 100%;
	}
	.header-grade{
		float: right;
		margin: 12.5vw 15vw 0 0;
		display: grid;
		justify-items: center;
		align-items: center;
		width: 14vw;
		height: 7vw;
		font-size: 3vw;
		border-radius: 3.5vw;
		/* font-weight: 500; */
		color: #363A44;
		background: #ffffff;
	}
	.nodata-icon{
		margin: 0 auto 0 auto;
		width: 85vw;
		height: 85vw;
		background: url(../../static/index/nodata.svg);
		/* background: url(../../static/index/nodata.png); */
		background-size: 100% 100%;
	}
	.nodata-text{
		width: 100%;
		font-size: 5vw;
		display: grid;
		justify-items: center;
		align-items: center;
	}
	.body{
		/* -68.25vw */
		margin: -58vw 0 0 0;
		// width: 100%;
		width: 100vw;
		height: auto;
		/* max-height: 20vh; */
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 20vh 10vh auto;
		
	}
	.body-search{
		@include big_size(1.1);
		width: 85%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-column-gap: 3vw;
		grid-template-columns: 1fr auto;
		/* grid-template-rows: 20vh 1fr; */
	}
    .body-search-left{
		width: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
	}
	.body-search-left-select{
		width: 100%;
		background: #ffffff;
		border-radius: 17.5px;
		
	}
	.container ::v-deep .uni-select{
		border: none;
	}
	.container ::v-deep .uni-select__input-box{
		margin: 0 10px 0 10px;
	}
	.body-search-right{
		width: 100%;
		display: grid;
		justify-items: end;
		align-items: center;
	}
	.body-search-right-button{
		width: 70px;
		height: 35px;
		background: url(../../static/hot/reset.png);
		background-size: 100% 100%;
		border-radius: 17.5px;
		cursor: pointer;
	}
	.body-list{
		width: 85vw;
		height: auto;
		max-height: 100%;
	}
	.body-list-piece{
		margin: 0 0 4vw 0;
		padding: 2vw 1vw;
		width: 85vw;
		@include add_height(30vw);
		background: #ffffff;
		border-radius: 2vw;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 10% 80% 10%; */
		grid-template-rows: 1fr 1fr 1fr;
		cursor: pointer;
	}
	.body-list-piece-header{
		width: 80.75vw;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-columns: 10% 70% 20%; 
		/* grid-template-rows: 20vh 1fr; */
		@include add_size(3.6vw);
	}
	.body-list-piece-header-icon{
		width: 5vw;
		height: 5vw;
		background: url(../../static/hot/studio.png);
		background-size: 100% 100%;
	}
	.body-list-piece-header-text{
		// width: 100%;
		width: 63vw;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-text-overflow: ellipsis;
		overflow:hidden;
		color: #686B73;
	}
	.body-list-piece-header-time{
		margin: 0 0 0 auto;
		color: #B3B5B9;
	}
	.body-list-piece-student{
		width: 80.75vw;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-columns: 10% 70% 20%; 
		/* grid-template-rows: 20vh 1fr; */
	}
	.body-list-piece-student-icon{
		margin: -1vw 0 0 0;
		width: 5vw;
		height: 5vw;
		background: url(../../static/hot/student.png);
		background-size: 100% 100%;
	}
	.body-list-piece-student-text{
		// width: 100%;
		width: 63vw;
		font-weight: 600;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-text-overflow: ellipsis;
		overflow:hidden;
	}
	.body-list-piece-teacher{
		width: 80.75vw;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-columns: 10% 70% 20%;
		/* grid-template-rows: 20vh 1fr; */
		@include add_size(3vw);
	}
	.body-list-piece-teacher-icon{
		margin: -1vw 0 0 0;
		width: 5vw;
		height: 5vw;
		background: url(../../static/hot/teacher.png);
		background-size: 100% 100%;
	}
	.body-list-piece-teacher-text{
		width: 63vw;
		// width: 100%;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-text-overflow: ellipsis;
		overflow:hidden;
		color: #686B73;
	}
	.body-list-piece-teacher-details{
		margin: 0 0 0 auto;
		width: 10vw;
		height: 5vw;
		background: url(../../static/hot/details.svg);
		background-size: 100% 100%;
	}
	
	.shadow{
		box-shadow: 0px 0px 5vw rgba(0, 0, 0, 0.08);
	}
	
	.container ::v-deep .mescroll-upwarp{
		display: none;
	}
</style>